<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 当前显示的表单类型（'login' 或 'register'）
const formMode = ref('login')

// 登录表单数据
const loginUsername = ref('')
const loginPassword = ref('')
const rememberMe = ref(false)
const loginError = ref('')
const isLoading = ref(false)
const showPassword = ref(false)
const showRegisterPassword = ref(false)
const showConfirmPassword = ref(false)

// 注册表单数据
const registerUsername = ref('')
const registerEmail = ref('')
const registerPassword = ref('')
const confirmPassword = ref('')
const registerError = ref('')
const registerSuccess = ref(false)
const passwordStrength = ref(0) // 0: 弱, 1: 中, 2: 强

// 切换表单模式
const toggleFormMode = () => {
  formMode.value = formMode.value === 'login' ? 'register' : 'login'
  // 清除错误消息
  loginError.value = ''
  registerError.value = ''
  registerSuccess.value = false
}

// 密码强度检测
const checkPasswordStrength = (password) => {
  if (!password) {
    passwordStrength.value = 0
    return
  }
  
  let score = 0
  // 长度检查
  if (password.length >= 8) score++
  if (password.length >= 12) score++
  // 包含数字
  if (/\d/.test(password)) score++
  // 包含小写字母
  if (/[a-z]/.test(password)) score++
  // 包含大写字母
  if (/[A-Z]/.test(password)) score++
  // 包含特殊字符
  if (/[^A-Za-z0-9]/.test(password)) score++
  
  // 映射到0-2的强度级别
  passwordStrength.value = Math.min(Math.floor(score / 3), 2)
}

// 自动生成jinjin账号
onMounted(() => {
  // 检查本地存储中是否已存在jinjin账号
  const hasJinjinAccount = localStorage.getItem('hasJinjinAccount')
  
  if (!hasJinjinAccount) {
    // 模拟创建jinjin账号
    const jinjinAccount = {
      username: 'jinjin',
      password: '12345678', // 简单密码用于演示
      email: 'jinjin@example.com'
    }
    
    // 保存到本地存储
    localStorage.setItem('jinjinAccount', JSON.stringify(jinjinAccount))
    localStorage.setItem('hasJinjinAccount', 'true')
  }
  
  // 加载jinjin账号信息到登录表单
  const jinjinAccount = localStorage.getItem('jinjinAccount')
  if (jinjinAccount) {
    const account = JSON.parse(jinjinAccount)
    loginUsername.value = account.username
  }
})

// 登录表单验证
const validateLogin = () => {
  if (!loginUsername.value.trim()) {
    loginError.value = '请输入用户名'
    return false
  }
  if (!loginPassword.value) {
    loginError.value = '请输入密码'
    return false
  }
  loginError.value = ''
  return true
}

// 注册表单验证
const validateRegister = () => {
  if (!registerUsername.value.trim()) {
    registerError.value = '请输入用户名'
    return false
  }
  if (!registerEmail.value.trim()) {
    registerError.value = '请输入邮箱'
    return false
  }
  // 邮箱格式验证
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  if (!emailRegex.test(registerEmail.value)) {
    registerError.value = '请输入有效的邮箱地址'
    return false
  }
  if (!registerPassword.value) {
    registerError.value = '请输入密码'
    return false
  }
  if (registerPassword.value.length < 8) {
    registerError.value = '密码长度至少为8位'
    return false
  }
  if (registerPassword.value !== confirmPassword.value) {
    registerError.value = '两次输入的密码不一致'
    return false
  }
  registerError.value = ''
  return true
}

// 登录处理函数
const handleLogin = async () => {
  if (!validateLogin()) return
  
  isLoading.value = true
  loginError.value = ''
  
  try {
    // 模拟登录API请求延迟
    await new Promise(resolve => setTimeout(resolve, 1200))
    
    // 检查是否为jinjin账号
    const jinjinAccount = localStorage.getItem('jinjinAccount')
    if (jinjinAccount) {
      const account = JSON.parse(jinjinAccount)
      if (loginUsername.value === account.username && loginPassword.value === account.password) {
        console.log('jinjin账号登录成功')
        // 存储当前用户信息
        const currentUser = {
          id: '1',
          name: 'jinjin',
          avatar: 'https://picsum.photos/id/64/200/200',
          status: 'online'
        }
        localStorage.setItem('currentUser', JSON.stringify(currentUser))
        // 跳转到聊天页面
        router.push('/chat')
        return
      }
    }
    
    // 模拟其他账号登录成功
    console.log('登录成功:', {
      username: loginUsername.value,
      remember: rememberMe.value
    })
    
    // 存储当前用户信息
    const currentUser = {
      id: Date.now().toString(),
      name: loginUsername.value,
      avatar: `https://picsum.photos/id/${Math.floor(Math.random() * 100)}/200/200`,
      status: 'online'
    }
    localStorage.setItem('currentUser', JSON.stringify(currentUser))
    // 登录成功后跳转到聊天页面
    router.push('/chat')
  } catch (error) {
    loginError.value = '用户名或密码错误'
  } finally {
    isLoading.value = false
  }
}

// 注册处理函数
const handleRegister = async () => {
  if (!validateRegister()) return
  
  isLoading.value = true
  registerError.value = ''
  
  try {
    // 检查用户名是否已存在（jinjin是保留用户名）
    if (registerUsername.value === 'jinjin') {
      registerError.value = '该用户名已被使用'
      isLoading.value = false
      return
    }
    
    // 模拟注册API请求延迟
    await new Promise(resolve => setTimeout(resolve, 1500))
    
    // 模拟注册成功
    console.log('注册成功:', {
      username: registerUsername.value,
      email: registerEmail.value
    })
    
    registerSuccess.value = true
    
    // 3秒后自动切换到登录表单
    setTimeout(() => {
      formMode.value = 'login'
      registerSuccess.value = false
      // 清除表单数据
      registerUsername.value = ''
      registerEmail.value = ''
      registerPassword.value = ''
      confirmPassword.value = ''
      passwordStrength.value = 0
    }, 3000)
  } catch (error) {
    registerError.value = '注册失败，请稍后再试'
  } finally {
    isLoading.value = false
  }
}

// 忘记密码处理函数
const handleForgotPassword = () => {
  alert('忘记密码功能即将上线')
}

// 社交登录处理函数
const handleSocialLogin = (provider) => {
  console.log(`使用${provider}登录`)
  alert(`${provider}登录功能即将上线`)
}

// 计算当前表单的标题
const formTitle = computed(() => {
  return formMode.value === 'login' ? '欢迎回来' : '创建账号'
})
</script>

<template>
  <div class="chat-login-wrapper">
    <!-- 左侧装饰区域 -->
    <div class="chat-login-decoration">
      <div class="decoration-content">
        <div class="app-logo">
          <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
            <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
          </svg>
        </div>
        <h1 class="app-name">ChatWave</h1>
        <p class="app-slogan">连接世界，分享每一刻</p>
        <div class="feature-list">
          <div class="feature-item">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
              <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
              <polyline points="22 4 12 14.01 9 11.01"></polyline>
            </svg>
            <span>实时消息传递</span>
          </div>
          <div class="feature-item">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
              <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
              <circle cx="9" cy="7" r="4"></circle>
              <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
              <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
            </svg>
            <span>高清视频通话</span>
          </div>
          <div class="feature-item">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
              <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
              <circle cx="8.5" cy="8.5" r="1.5"></circle>
              <polyline points="21 15 16 10 5 21"></polyline>
            </svg>
            <span>安全文件分享</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 右侧登录注册表单区域 -->
    <div class="chat-login-form-container">
      <div class="login-form-wrapper">
        <!-- 表单标题 -->
        <div class="form-header">
          <h2>{{ formTitle }}</h2>
          <p v-if="formMode === 'login'">登录您的账号继续聊天</p>
          <p v-else>加入ChatWave，开始您的聊天之旅</p>
        </div>
        
        <!-- 登录表单 -->
        <div v-if="formMode === 'login' && !registerSuccess" class="form-content">
          <form @submit.prevent="handleLogin">
            <div class="form-group">
              <label for="login-username" class="form-label">用户名</label>
              <div class="input-group">
                <svg class="input-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                  <circle cx="12" cy="7" r="4"></circle>
                </svg>
                <input
                  type="text"
                  id="login-username"
                  v-model="loginUsername"
                  placeholder="请输入用户名"
                  class="form-input"
                  autocomplete="username"
                  :class="{ 'input-error': loginError }"
                />
              </div>
            </div>
            
            <div class="form-group">
              <label for="login-password" class="form-label">密码</label>
              <div class="input-group">
                <svg class="input-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                  <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                  <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                </svg>
                <input
                  :type="showPassword ? 'text' : 'password'"
                  id="login-password"
                  v-model="loginPassword"
                  placeholder="请输入密码"
                  class="form-input"
                  autocomplete="current-password"
                  :class="{ 'input-error': loginError }"
                />
                <button
                  type="button"
                  class="toggle-password"
                  @click="showPassword = !showPassword"
                  aria-label="切换密码可见性"
                >
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                    <template v-if="!showPassword">
                      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                      <circle cx="12" cy="12" r="3"></circle>
                    </template>
                    <template v-else>
                      <path d="M12 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"></path>
                      <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z"></path>
                    </template>
                  </svg>
                </button>
              </div>
            </div>
            
            <div class="form-options">
              <label class="remember-me">
                <input type="checkbox" v-model="rememberMe" />
                <span>记住我</span>
              </label>
              <button
                type="button"
                class="forgot-password"
                @click="handleForgotPassword"
              >
                忘记密码?
              </button>
            </div>
            
            <div v-if="loginError" class="error-message">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="10"></circle>
                <line x1="12" y1="8" x2="12" y2="12"></line>
                <line x1="12" y1="16" x2="12.01" y2="16"></line>
              </svg>
              {{ loginError }}
            </div>
            
            <button type="submit" class="primary-button" :disabled="isLoading">
              <span v-if="!isLoading">登录</span>
              <span v-else>
                <svg class="loading-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                  <circle cx="12" cy="12" r="10"></circle>
                  <path d="M12 6v6l4 2"></path>
                </svg>
                登录中...
              </span>
            </button>
          </form>
          
          <!-- 社交登录选项 -->
          <div class="social-login">
            <p class="social-login-text">或者使用以下方式登录</p>
            <div class="social-buttons">
              <button 
                type="button" 
                class="social-button" 
                @click="handleSocialLogin('微信')"
              >
                <svg width="20" height="20" viewBox="0 0 24 24" fill="#07C160">
                  <path d="M7 11l5 5 5-5z"/>
                </svg>
              </button>
              <button 
                type="button" 
                class="social-button" 
                @click="handleSocialLogin('QQ')"
              >
                <svg width="20" height="20" viewBox="0 0 24 24" fill="#12B7F5">
                  <path d="M7 11l5 5 5-5z"/>
                </svg>
              </button>
              <button 
                type="button" 
                class="social-button" 
                @click="handleSocialLogin('微博')"
              >
                <svg width="20" height="20" viewBox="0 0 24 24" fill="#E6162D">
                  <path d="M7 11l5 5 5-5z"/>
                </svg>
              </button>
            </div>
          </div>
        </div>
        
        <!-- 注册表单 -->
        <div v-else-if="formMode === 'register' && !registerSuccess" class="form-content">
          <form @submit.prevent="handleRegister">
            <div class="form-group">
              <label for="register-username" class="form-label">用户名</label>
              <div class="input-group">
                <svg class="input-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                  <circle cx="12" cy="7" r="4"></circle>
                </svg>
                <input
                  type="text"
                  id="register-username"
                  v-model="registerUsername"
                  placeholder="请输入用户名"
                  class="form-input"
                  autocomplete="username"
                  :class="{ 'input-error': registerError }"
                />
              </div>
            </div>
            
            <div class="form-group">
              <label for="register-email" class="form-label">邮箱</label>
              <div class="input-group">
                <svg class="input-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                  <polyline points="22 6 12 13 2 6"></polyline>
                </svg>
                <input
                  type="email"
                  id="register-email"
                  v-model="registerEmail"
                  placeholder="请输入邮箱"
                  class="form-input"
                  autocomplete="email"
                  :class="{ 'input-error': registerError }"
                />
              </div>
            </div>
            
            <div class="form-group">
              <label for="register-password" class="form-label">密码</label>
              <div class="input-group">
                <svg class="input-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                  <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                  <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                </svg>
                <input
                  :type="showRegisterPassword ? 'text' : 'password'"
                  id="register-password"
                  v-model="registerPassword"
                  placeholder="请设置密码（至少8位）"
                  class="form-input"
                  autocomplete="new-password"
                  :class="{ 'input-error': registerError }"
                  @input="checkPasswordStrength($event.target.value)"
                />
                <button
                  type="button"
                  class="toggle-password"
                  @click="showRegisterPassword = !showRegisterPassword"
                  aria-label="切换密码可见性"
                >
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                    <template v-if="!showRegisterPassword">
                      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                      <circle cx="12" cy="12" r="3"></circle>
                    </template>
                    <template v-else>
                      <path d="M12 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"></path>
                      <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z"></path>
                    </template>
                  </svg>
                </button>
              </div>
              
              <!-- 密码强度指示器 -->
              <div v-if="registerPassword" class="password-strength">
                <div class="strength-bars">
                  <div 
                    class="strength-bar"
                    :class="{ 
                      'strength-weak': passwordStrength >= 0, 
                      'strength-medium': passwordStrength >= 1, 
                      'strength-strong': passwordStrength >= 2 
                    }"
                  ></div>
                  <div 
                    class="strength-bar"
                    :class="{ 
                      'strength-weak': false, 
                      'strength-medium': passwordStrength >= 1, 
                      'strength-strong': passwordStrength >= 2 
                    }"
                  ></div>
                  <div 
                    class="strength-bar"
                    :class="{ 
                      'strength-weak': false, 
                      'strength-medium': false, 
                      'strength-strong': passwordStrength >= 2 
                    }"
                  ></div>
                </div>
                <div class="strength-text">
                  <span v-if="passwordStrength === 0" class="text-weak">弱</span>
                  <span v-else-if="passwordStrength === 1" class="text-medium">中</span>
                  <span v-else class="text-strong">强</span>
                </div>
              </div>
            </div>
            
            <div class="form-group">
              <label for="confirm-password" class="form-label">确认密码</label>
              <div class="input-group">
                <svg class="input-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                  <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                  <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                </svg>
                <input
                  :type="showConfirmPassword ? 'text' : 'password'"
                  id="confirm-password"
                  v-model="confirmPassword"
                  placeholder="请再次输入密码"
                  class="form-input"
                  autocomplete="new-password"
                  :class="{ 'input-error': registerError }"
                />
                <button
                  type="button"
                  class="toggle-password"
                  @click="showConfirmPassword = !showConfirmPassword"
                  aria-label="切换密码可见性"
                >
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                    <template v-if="!showConfirmPassword">
                      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                      <circle cx="12" cy="12" r="3"></circle>
                    </template>
                    <template v-else>
                      <path d="M12 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"></path>
                      <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z"></path>
                    </template>
                  </svg>
                </button>
              </div>
            </div>
            
            <div v-if="registerError" class="error-message">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="10"></circle>
                <line x1="12" y1="8" x2="12" y2="12"></line>
                <line x1="12" y1="16" x2="12.01" y2="16"></line>
              </svg>
              {{ registerError }}
            </div>
            
            <button type="submit" class="primary-button" :disabled="isLoading">
              <span v-if="!isLoading">注册</span>
              <span v-else>
                <svg class="loading-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                  <circle cx="12" cy="12" r="10"></circle>
                  <path d="M12 6v6l4 2"></path>
                </svg>
                注册中...
              </span>
            </button>
          </form>
        </div>
        
        <!-- 注册成功提示 -->
        <div v-if="registerSuccess" class="success-container">
          <div class="success-icon">
            <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
              <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
              <polyline points="22 4 12 14.01 9 11.01"></polyline>
            </svg>
          </div>
          <h3>注册成功！</h3>
          <p>您的账号已创建成功，即将跳转到登录页面...</p>
        </div>
        
        <!-- 表单切换提示 -->
        <div v-if="!registerSuccess" class="form-switch">
          <p>
            <span v-if="formMode === 'login'">还没有账号？</span>
            <span v-else>已有账号？</span>
            <button type="button" class="switch-button" @click="toggleFormMode">
              {{ formMode === 'login' ? '立即注册' : '返回登录' }}
            </button>
          </p>
        </div>
        
        <!-- 隐私政策 -->
        <div v-if="formMode === 'register' && !registerSuccess" class="privacy-policy">
          <p>点击注册，即表示您同意我们的<a href="#" class="text-link">服务条款</a>和<a href="#" class="text-link">隐私政策</a></p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 基础样式 */
.chat-login-wrapper {
  min-height: 100vh;
  display: flex;
  background-color: #f8fafc;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* 左侧装饰区域 */
.chat-login-decoration {
  flex: 1;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  position: relative;
  overflow: hidden;
  animation: gradientShift 15s ease infinite;
  background-size: 400% 400%;
}

/* 渐变动画 */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.chat-login-decoration::before {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  top: -100px;
  right: -100px;
}

.chat-login-decoration::after {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  bottom: -50px;
  left: -50px;
}

.decoration-content {
  max-width: 300px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.app-logo {
  width: 120px;
  height: 120px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 30px;
  backdrop-filter: blur(10px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
}

.app-name {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #ffffff 0%, #e5e7eb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.app-slogan {
  font-size: 18px;
  margin-bottom: 40px;
  opacity: 0.9;
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  opacity: 0.9;
  transition: transform 0.3s ease;
}

.feature-item:hover {
  transform: translateX(10px);
}

/* 右侧表单区域 */
.chat-login-form-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
  background-color: #f8fafc;
  position: relative;
  overflow: hidden;
}

.chat-login-form-container::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(37, 99, 235, 0.1) 100%);
  top: -200px;
  right: -200px;
}

.chat-login-form-container::after {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(37, 99, 235, 0.08) 100%);
  bottom: -150px;
  left: -150px;
}

.login-form-wrapper {
  width: 100%;
  max-width: 400px;
  background: white;
  border-radius: 30px;
  padding: 50px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.05);
  animation: slideIn 0.5s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 表单标题 */
.form-header {
  text-align: center;
  margin-bottom: 40px;
  animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.form-header h2 {
  font-size: 32px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 8px;
}

.form-header p {
  font-size: 16px;
  color: #64748b;
  margin: 0;
}

/* 表单内容 */
.form-content {
  margin-bottom: 30px;
}

.form-group {
  margin-bottom: 24px;
}

.form-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 8px;
}

.input-group {
  position: relative;
  display: flex;
  align-items: center;
}

/* 密码显示/隐藏按钮 */
.toggle-password {
  position: absolute;
  right: 16px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.toggle-password:hover svg {
  stroke: #3b82f6;
}

/* 密码强度指示器 */
.password-strength {
  margin-top: 8px;
}

.strength-bars {
  display: flex;
  gap: 6px;
  height: 4px;
  margin-bottom: 4px;
}

.strength-bar {
  flex: 1;
  background: #e2e8f0;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.strength-bar.strength-weak {
  background: #ef4444;
}

.strength-bar.strength-medium {
  background: #f59e0b;
}

.strength-bar.strength-strong {
  background: #10b981;
}

.strength-text {
  font-size: 12px;
}

.text-weak {
  color: #ef4444;
}

.text-medium {
  color: #f59e0b;
}

.text-strong {
  color: #10b981;
}

.input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  transition: all 0.3s ease;
}

.form-input {
  width: 100%;
  padding: 14px 16px 14px 48px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 16px;
  color: #1e293b;
  background: white;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.form-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.form-input:focus + .input-icon {
  stroke: #3b82f6;
}

.form-input::placeholder {
  color: #94a3b8;
}

.input-error {
  border-color: #ef4444 !important;
}

.input-error + .input-icon {
  stroke: #ef4444 !important;
}

/* 表单选项 */
.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.remember-me {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #64748b;
}

.remember-me input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  border: 2px solid #e2e8f0;
  border-radius: 4px;
  accent-color: #3b82f6;
}

.forgot-password {
  background: none;
  border: none;
  color: #3b82f6;
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  transition: color 0.3s ease;
}

.forgot-password:hover {
  color: #2563eb;
  text-decoration: underline;
}

/* 错误消息 */
.error-message {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #ef4444;
  font-size: 14px;
  margin-bottom: 20px;
}

/* 主要按钮 */
.primary-button {
  width: 100%;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 16px 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
  background-size: 200% 200%;
  animation: buttonGradient 3s ease infinite;
}

@keyframes buttonGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.primary-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: all 0.6s ease;
}

.primary-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(59, 130, 246, 0.4);
}

.primary-button:hover:not(:disabled)::before {
  left: 100%;
}

.primary-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.loading-icon {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 社交登录 */
.social-login {
  margin-top: 30px;
}

.social-login-text {
  text-align: center;
  color: #64748b;
  font-size: 14px;
  margin-bottom: 20px;
  position: relative;
}

.social-login-text::before,
.social-login-text::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 35%;
  height: 1px;
  background: #e2e8f0;
}

.social-login-text::before {
  left: 0;
}

.social-login-text::after {
  right: 0;
}

.social-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.social-button {
  width: 50px;
  height: 50px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.social-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: #3b82f6;
}

/* 表单切换 */
.form-switch {
  text-align: center;
  margin-top: 30px;
}

.form-switch p {
  font-size: 14px;
  color: #64748b;
  margin: 0;
}

.switch-button {
  background: none;
  border: none;
  color: #3b82f6;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.3s ease;
  padding: 0;
}

.switch-button:hover {
  color: #2563eb;
  text-decoration: underline;
}

/* 隐私政策 */
.privacy-policy {
  text-align: center;
  margin-top: 20px;
}

.privacy-policy p {
  font-size: 12px;
  color: #94a3b8;
  margin: 0;
}

.text-link {
  color: #3b82f6;
  text-decoration: none;
}

.text-link:hover {
  text-decoration: underline;
}

/* 注册成功提示 */
.success-container {
  text-align: center;
  padding: 40px 0;
}

.success-icon {
  width: 120px;
  height: 120px;
  background: #f0fdf4;
  border-radius: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 30px;
}

.success-container h3 {
  font-size: 24px;
  font-weight: 700;
  color: #10b981;
  margin-bottom: 12px;
}

.success-container p {
  font-size: 16px;
  color: #64748b;
  margin: 0;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .chat-login-decoration {
    display: none;
  }
  
  .login-form-wrapper {
    box-shadow: none;
    background: transparent;
    padding: 0;
  }
}

@media (max-width: 480px) {
  .chat-login-form-container {
    padding: 20px;
  }
  
  .form-header h2 {
    font-size: 24px;
  }
  
  .form-input {
    padding: 12px 14px 12px 44px;
    font-size: 14px;
  }
  
  .primary-button {
    padding: 14px 20px;
    font-size: 14px;
  }
  
  .social-button {
    width: 44px;
    height: 44px;
  }
}
</style>